<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                 xmlns:ui="http://java.sun.com/jsf/facelets"
                 xmlns:h="http://java.sun.com/jsf/html"
                 xmlns:f="http://java.sun.com/jsf/core"
                 xmlns:a4j="http://richfaces.org/a4j"
                 xmlns:rich="http://richfaces.org/rich"
                 xmlns:fn="http://java.sun.com/jsp/jstl/functions"
                 xmlns:c="http://java.sun.com/jsp/jstl/core">
    <style type="text/css">
.pic-normal {
    width: 120px;
    border: 2px solid #ACBECE;
}

.wrap1 {
    width: 190px;
    height: 130px;
    float: left;
}
</style>


    <br />

    <a4j:outputPanel id="gallery">
       <h:graphicImage value="/images/handbook/liucheng.png" />
       <h:graphicImage value="/images/handbook/wtjUpdate.png" />
       <h:graphicImage value="/images/handbook/wtjUpdate.png" />
    </a4j:outputPanel>

    <br style="clear: both" />


    <rich:jQuery selector="#gallery img" query="addClass('pic-normal')" />
    <rich:jQuery selector="#gallery img"
        query="wrap('&lt;div class=\'wrap1\'&gt;&lt;/div&gt;')" />
    <rich:jQuery selector="#gallery img" event="mouseover"
        query="jQuery(this).stop().animate({width:'180px'})" />
    <rich:jQuery selector="#gallery img" event="mouseout"
        query="jQuery(this).stop().animate({width:'120px'})" />
</ui:composition>